<template>
  <div >
    <div class="sort">
        <div class="top">
            <img src="sortimg/35.png" alt="">
        </div>
        <div class="pic">
            <div class="biaoti" v-for="(v,i) in this.$store.state.youpin.obj" :key="i">
               {{v.title}}
            </div>
            <ul>
                <li v-for="(v,i) in this.$store.state.youpin.obj" :key="i"><img :src="v.img" alt=""><a href="#">{{v.text}}</a></li>
            </ul>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.$store.dispatch("youpin");
  },
};
</script>
<style scoped>
.sort{
    width: 100%;
    height: 100%;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    box-sizing: border-box;
    overflow-y: auto;
}
.sort .top{
    width: 100%;
    border-radius: 0.1rem;
}
.sort .top img{
    width: 100%;
    border-radius: 0.1rem;
}
.sort .pic{
    width: 100%;
    margin-top: -2.1rem;
    border-radius: 0.1rem;
     border-radius: 0.1rem;
}
.sort .pic .biaoti{
    padding: 0.1rem;
    width: 100%;
    font-size: 0.16rem;
    text-align: left;
    box-sizing: border-box;
    background-color: #fff;
   
}
.sort  .pic  ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.1rem;
    align-items: center;
    margin-top: -1rem;
    box-sizing: border-box;
    background-color: #fff;
}
.sort .pic  ul li{
    width: 32%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    margin-top: 0.1rem;
}
.sort .pic  ul li img{
    border-radius: 0.1rem;
    width: 80%;
    background-color: #f4f4f4;
}
.sort .pic ul li a{
    font-size: 0.12rem;
    line-height: 0.24rem;
    color: #666;
}

</style>